<template>
  <div class="position-form-wrapper">
    <el-form :model="positionForm" label-width="80px">
      <el-form-item label="定位方式">
        <el-select v-model="positionForm.position" placeholder="请选择定位方式">
          <el-option
            v-for="item in positionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="层级">
        <el-input v-model="positionForm.zIndex" placeholder="请输入层级" />
      </el-form-item>
      <el-form-item label="上">
        <el-input v-model="positionForm.top" placeholder="请输入上" />
      </el-form-item>
      <el-form-item label="左">
        <el-input v-model="positionForm.left" placeholder="请输入左" />
      </el-form-item>
      <el-form-item label="右">
        <el-input v-model="positionForm.right" placeholder="请输入右" />
      </el-form-item>
      <el-form-item label="下">
        <el-input v-model="positionForm.bottom" placeholder="请输入下" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import { positionOptions } from "@/config/form/index";
import { positionType } from "@/types/form/index";
export default defineComponent({
  name: "PositionForm", // 组件定位组件, position, top, left, right, bottom
  props: {
    property: {
      default: (): positionType => ({
        position: "static",
        top: "auto",
        left: "auto",
        right: "auto",
        bottom: "auto",
        zIndex: "0",
      }),
    },
    componentName: {
      type: String,
      require: true,
    },
  },
  setup(props) {
    const positionForm = computed(() => {
      return props.property;
    });
    return {
      positionForm,
      positionOptions,
    };
  },
});
</script>

<style lang="scss" scoped>
.position-form-wrapper {
}
</style>
